<template>
    <n-scrollbar class="max-h-360px">
        <n-list>
            <n-list-item
                v-for="(item, index) in props.list"
                :key="item.id"
                class="hover:bg-#f6f6f6 dark:hover:bg-dark cursor-pointer"
                @click.capture="handleRead(index)"
            >
                <n-thing class="px-15px" :class="{ 'opacity-30': item.readed }">
                    <template #avatar>
                        <n-tag v-if="item.typeName" type="info">{{
                            item.typeName
                        }}</n-tag>
                        <n-tag v-else type="info">{{ item.stateName }}</n-tag>
                    </template>
                    <template #header>
                        <n-ellipsis :line-clamp="1">
                            {{ item.title }}
                            <template #tooltip>
                                {{ item.title }}
                            </template>
                        </n-ellipsis>
                    </template>
                    <template v-if="item.tagTitle" #header-extra>
                        <n-tag v-bind="item.tagProps" size="small">{{
                            item.tagTitle
                        }}</n-tag>
                    </template>
                    <template #description>
                        <n-ellipsis v-if="item.description" :line-clamp="2">
                            {{ item.description }}
                        </n-ellipsis>
                        <p>{{ item.createTime }}</p>
                        <jb-btn
                            v-show="false"
                            ref="sysNoticeRef"
                            icon="mdi:eye"
                            quaternary
                            circle
                            :tip-text="`${item.title}`"
                            :drawer-component="NoticeDrawer"
                            :drawer-title="`${item.title}`"
                            :drawer-positive-text="`${
                                props.itemKey == 'todo'
                                    ? ''
                                    : item.readed
                                    ? '此通知已被标记为【已读】'
                                    : '标记已读'
                            }`"
                            :drawer-component-props="{
                                id: item.id,
                                type: `${props.itemKey}`
                            }"
                            :drawer-args="{
                                negativeText: '关闭',
                                defaultWidth: '1400',
                                resizable: true,
                                drawerClass: 'user_msg_tips'
                            }"
                            @drawer-yes-click="markReaded"
                        >
                        </jb-btn>
                    </template>
                </n-thing>
            </n-list-item>
        </n-list>
    </n-scrollbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import NoticeDrawer from '@/views/_builtin/individual/notice/components/notice-drawer/index.vue'
import { JBoltApi } from '@/utils/request'
import { ResData } from '@/typings/request'
import { DynamicComponentEmitArgs } from '@/typings/jbolt.components'

defineOptions({ name: 'MessageList' })

interface Props {
    list?: any[]
    itemKey: string
}

const props = withDefaults(defineProps<Props>(), {
    list: () => []
})

interface Emits {
    (e: 'read'): void
}

const emit = defineEmits<Emits>()

const sysNoticeRef = ref<any[]>([])
function handleRead(index: number) {
    sysNoticeRef?.value[index].showDrawer()
}

async function markReaded({ close, componentProps }: DynamicComponentEmitArgs) {
    const { error } = await JBoltApi.get<ResData>(
        `/api/admin/msgCenter/sysNoticeMarkMultiAsRead?ids=${componentProps?.id}`
    )
    if (error) return
    close()
    emit('read')
}
</script>
